<template>
  <div class="modal">
    <div class="reset-pw">
      <div class="modal-header">
        <i></i>
        <span>批量重置密码</span>
        <i class="el-icon-close" @click="$emit('close')"></i>
      </div>
      <div class="modal-body">
        <div class="row" v-if="isSuperAdmin">
          <span class="title">选择学校</span>
          <div class="content">
            <el-cascader
              placeholder="可选择学校"
              v-model="areaValue"
              :props="props"
              :show-all-levels="false"
              clearable
            ></el-cascader>
          </div>
        </div>
        <div class="row">
          <span class="title">选择角色</span>
          <div class="content">
            <el-select v-model="roleId">
              <el-option
                v-for="role in validRoleList"
                :key="role.F_role_id || role.id || ''"
                :value="role.F_role_id || role.id || ''"
                :label="role.F_role_name || role.name || ''"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="row">
          <span class="title">新密码</span>
          <div class="content">
            <el-input v-model="password" maxlength="18" clearable> </el-input>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="cancel-btn btn" @click="$emit('close')">取消</div>
        <div class="confirm-btn btn" @click="confirm">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import api from '@/api/api';
const lazyLoad = async (node, resolve) => {
  const { level, value } = node;
  const areaId = level === 0 ? 0 : value;
  let list = [];
  if (level <= 2) {
    const { F_districts } = await api.getDistricts2({
      F_parent_id: areaId,
    });
    list = F_districts.map(({ F_id, F_name }) => ({
      value: F_id,
      label: F_name,
      leaf: false,
    }));
  } else {
    const { F_schools } = await api.getSchools({
      F_page: 0,
      F_area_id: areaId,
    });
    list = F_schools.map(({ F_id, F_name }) => ({
      value: F_id,
      label: F_name,
      leaf: true,
    }));
  }
  resolve(list);
};
export default {
  name: 'ResetPassword',
  props: {
    roleList: {
      type: Array,
      required: false,
      default: () => []
    },
  },
  data() {
    return {
      areaValue: [],
      props: {
        lazy: true,
        lazyLoad,
      },
      roleId: '',
      password: '',
    };
  },
  computed: {
    ...mapGetters('user', ['isSuperAdmin']),
    schoolId() {
      if (this.areaValue.length) return this.areaValue.at(-1);
      return '';
    },
    // 过滤掉 F_role_id 为 undefined 或 null 的角色
    validRoleList() {
      if (!this.roleList || !Array.isArray(this.roleList)) {
        return [];
      }
      return this.roleList.filter(role => {
        const roleId = role.F_role_id || role.id;
        return roleId !== undefined && roleId !== null && roleId !== '';
      });
    },
  },

  methods: {
    async confirm() {
      const params = {
        F_school_id: this.schoolId,
        F_role_id: this.roleId,
        F_password: this.password,
      };
      const formData = new FormData();
      for (let [k, v] of Object.entries(params)) {
        formData.append(k, v);
      }
      const { F_responseNo, F_responseMsg } = await this.$api.updateUserPwd(
        formData
      );
      if (F_responseNo === 10000) {
        this.$toast(`批量重置密码成功`);
        this.$emit('update');
        this.$emit('close');
      } else {
        this.$toast(`批量重置密码失败:${F_responseMsg}`);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.reset-pw {
  display: flex;
  flex-direction: column;
  width: 600px;
  height: 320px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 16px;
  color: #666;
  border-radius: 6px;
  background-color: #fff;

  .modal-header {
    padding: 0 20px;
    height: 45px;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      cursor: pointer;
    }
  }
  .modal-body {
    box-sizing: border-box;
    padding: 20px 40px;
    flex: 1;
    text-align: left;
    align-items: center;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .row {
      display: flex;
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      .title {
        flex-shrink: 0;
        width: 80px;
        line-height: 40px;
      }

      .class-list {
        display: flex;
        flex-wrap: wrap;
        .class-item {
          display: inline-block;
          height: 33px;
          line-height: 33px;
          padding: 0 10px;
          margin: 0 14px 8px 0;
          font-size: 14px;
          color: #808080;
          border: 1px solid #e7e2e2;
          border-radius: 3px;
          user-select: none;
          cursor: pointer;
          &.checked {
            background-color: #009cff;
            color: #fff;
          }
        }
      }
    }
  }

  .modal-footer {
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 80px;
      height: 34px;
      line-height: 34px;
    }
    .cancel-btn {
      margin-right: 20px;
      background-color: #fff;
      border: solid 2px #f5f5f5;
      color: #b3b3b3;
    }
    .confirm-btn {
      background-color: #009cff;
      color: #fff;
    }
  }
}
</style>
